<template>
  <!-- 饼图模板组件 -->
  <!-- <borderA001> -->
  <component :is="chartBorderComponent[formatData.border]" :color="[formatData.borderColor1, formatData.borderColor2]">
    <div class="show-pie" :style="{ padding: formatData.padding, height: '100%', width: '100%', boxSizing: 'border-box' }">
      <div v-menus:right="menus" style="height: 100%;width: 100%;" ref="refpie">
      </div>
    </div>

    <!-- </borderA001> -->
  </component>
  <config ref="refConfig" @propsDataEv="propsDataEv" />
</template>

<script setup>
import { ref, onUnmounted, inject, shallowRef, nextTick, computed, onMounted, onActivated } from 'vue'
import { myScale } from '@/utils/myScale.js'
import { ChartGetDataListPost } from '@/api/chart/index.js'
import config from '@/components/chart/pie/config.vue'
import { chartBorderComponent } from '@/utils/chart.js'

const refConfig = ref(null)
import * as echarts from 'echarts';
const props = defineProps(['data', 'modelType', 'modelRow'])

const provideGlobalConfigEv = inject('provideGlobalConfigEv');
const provideModelConfigEv = inject('provideModelConfigEv');

const refpie = ref(null)
var myrefpie = ref(null)
const menus = shallowRef({
  menus: [
    {
      label: "模板配置",
      tip: '修改当前模板配置饼图',
      click: () => {
        console.log('点击显示饼图配置')
        refConfig.value.drawer = true
        refConfig.value.data
        refConfig.value.resetData(props.data)
        return true;
      }
    },
    {
      label: "模块配置",
      tip: '修改当前模块板配置',
      click: () => {
        console.log('点击显示饼图配置', props)
        provideModelConfigEv(props.modelType, props.modelRow)
        return true;
      }
    },
    {
      label: "全局配置", tip: '修改全局配置', click: () => {
        console.log('点击显示面板配置')
        provideGlobalConfigEv()
        return true;
      }
    }
  ]
})
let timer = null;

onMounted(() => {
  chartInitEv1()
  getDataEv()
})

onActivated(() => {

})

const formatData = computed(() => {
  return formatDataEv(JSON.parse(JSON.stringify(props.data)))
})

const formatDataEv = (val) => {
  val.config.title.textStyle.fontSize = myScale(val.config.title.textStyle.fontSize)
  val.config.series[0].label.fontSize = myScale(val.config.series[0].label.fontSize)
  val.padding = myScale(val.padding) + 'px'

  return val
}

const propsDataEv = (val) => {

  console.log('收到修改的内容')
  console.log(val)
  let updateData = formatDataEv(JSON.parse(JSON.stringify(val)))
  console.log('格式化后的数据')
  console.log(updateData)
  Object.assign(props.data, val)
  if (myrefpie) {
    myrefpie.setOption(updateData.config);
  }

}



const chartInitEv1 = async () => {
  await nextTick()
  myrefpie = echarts.init(refpie.value);
  myrefpie.setOption(formatData.value.config);
  // myChart1.resize();
  window.addEventListener("resize", function () {
    myrefpie.resize();
  });
}


const getDataEv = async () => {
  console.log('饼图查询数据')
  if (props.data.sql == '') {
    return
  }
  if (props.data.pool == '') {
    return
  }
  let data = {}
  data.pool = props.data.pool
  data.sql = props.data.sql
  data.components = props.data.components
  try {
    let arr_data = await ChartGetDataListPost(data)
    if (arr_data.status != 200) {
      return
    }
    formatData.value.config.series[0].data = arr_data.data.result
    myrefpie.setOption(formatData.value.config);
    window.addEventListener("resize", function () {
      myrefpie.resize();
    });
  } catch (error) {
    ElMessage.error('面板数据查询接口异常' + error)
  } finally {
    startTimerEv()
  }
}

// 启动定时器
const startTimerEv = () => {



  if (timer) clearInterval(timer);
  // 设置每秒滚动一行
  timer = setInterval(() => {

    getDataEv()

  }, props.data.time * 1000);
}

onUnmounted(() => {
  // 组件卸载记得清除计时器
  if (timer) clearInterval(timer);
  timer = null;
})
</script>

<style lang='less' scoped>
.show-pie {
  padding: 15px;
  box-sizing: border-box;
}
</style>